<script setup>
import { ref, h, computed, onMounted } from 'vue'
import { initPerfume } from 'perfume.js'
import NavigationTiming from './metrics/NavigationTiming.vue'
import NetworkInformation from './metrics/NetworkInformation.vue'
import StorageEstimate from './metrics/StorageEstimate.vue'

const model = defineModel(false)
const columns = [
    {
        title: '指标',
        key: 'title',
        align: 'center',
        ellipsis: {
            tooltip: true
        },
        minWidth: 100
    },
    {
        title: '数据',
        key: 'data',
        render: row => row.render(row),
        align: 'center',
        ellipsis: {
            tooltip: true
        },
        minWidth: 100
    }
]
const metricDefine = {
    navigationTiming: {
        title: '导航信息',
        render: data => h(NavigationTiming, data.data)
    },
    networkInformation: {
        title: '网络信息',
        render: data => h(NetworkInformation, data.data)
    },
    storageEstimate: {
        title: '存储信息',
        render: data => h(StorageEstimate, data.data)
    },
    FCP: {
        title: '首次内容绘制',
        render: data => data.data + 'ms'
    },
    LCP: {
        title: '最大内容绘制',
        render: data => data.data + 'ms'
    },
    TTI: {
        title: '可交互时间',
        render: data => data.data + 'ms'
    },
    TBT: {
        title: '总阻塞时间',
        render: data => data.data + 'ms'
    },
    CLS: {
        title: '累积布局偏移',
        render: data => data.data + 'ms'
    },
    FID: {
        title: '首次输入延迟',
        render: data => data.data + 'ms'
    },
    speedIndex: {
        title: '速度指数',
        render: data => data.data + 'ms'
    },
    TTFB: {
        title: '首字节时间',
        render: data => data.data + 'ms'
    },
    INP: {
        title: '输入延迟',
        render: data => data.data + 'ms'
    },
    CTT: {
        title: '内容传输时间',
        render: data => data.data + 'ms'
    },
    FMP: {
        title: '首次有效绘制',
        render: data => data.data + 'ms'
    },
    TTI: {
        title: '可交互时间',
        render: data => data.data + 'ms'
    },
    DCL: {
        title: 'DOMContentLoaded',
        render: data => data.data + 'ms'
    },
    LCP: {
        title: '最大内容绘制',
        render: data => data.data + 'ms'
    },
    TTFP: {
        title: '首次内容绘制时间',
        render: data => data.data + 'ms'
    },
    TTFP: {
        title: '首次内容绘制时间',
        render: data => data.data + 'ms'
    }
}
const metric = [
    {
        id: 'core',
        label: '核心指标',
        value: ['LCP', 'CLS', 'FID']
    },
    {
        id: 'network',
        label: '网络性能',
        value: ['TTFB', 'ResourceTiming']
    },
    {
        id: 'interaction',
        label: '用户交互',
        value: ['FID', 'TBT']
    },
    {
        id: 'stable',
        label: '视觉稳定性',
        value: ['CLS']
    }
]
const selected = ref(['core', 'network'])
const metrics = ref([])
onMounted(() => {
    initPerfume({
        resourceTiming: false,
        elementTiming: false,
        analyticsTracker: options => {
            const metric = metricDefine[options.metricName]
            if (metric) {
                metrics.value.push(Object.assign(options, metric))
            }
        }
    })
})
const isChecked = metricName =>  metric.filter(it=>selected.value.includes(it.id)).some(it=>it.value.includes(metricName));
const checkedMetrics = computed(() => metrics.value.filter(it => isChecked(it.metricName)))
</script>

<template>
    <slot>
        <n-flex justify="center" style="padding: 1rem 2rem">
            <div>123</div>
            <div @click="model = true">性能分析</div>
        </n-flex>
    </slot>
    <n-modal
        v-model:show="model"
        class="w-50"
        preset="card"
        title="网页指标"
        size="huge"
        :bordered="false">
        <n-scrollbar class="min-h-50vh max-h-80vh">
            <n-flex vertical size="large">
                <n-flex vertical size="large">
                    <n-checkbox-group v-model:value="selected">
                        <n-flex :size="0">
                            <n-checkbox
                                v-for="item in metric"
                                :value="item.id"
                                :label="item.label" />
                        </n-flex>
                    </n-checkbox-group>
                </n-flex>
                <n-data-table
                    size="small"
                    bordered
                    :single-line="false"
                    :columns="columns"
                    :data="checkedMetrics"
                    striped
                    :row-key="row => row.url" />
            </n-flex>
        </n-scrollbar>
    </n-modal>
</template>
